<template>
  <Transition name="gems-alert-fade">
    <div class="gems-alert" :class="{ [`gems-alert__${type}`]: type, [`gems-alert__${effect}`] : effect }" v-if="visible">
      <div class="gems-alert__content" >
        {{ content }}
        <span>
          <slot />
        </span>
      </div>
      <div class="gems-alert__close" v-if="closable">
        <Icon icon="xmark" @click.stop="visible = false" />
      </div>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { AlertProps, AlertEmits } from "./types";

import Icon from '../Icon/Icon.vue';

defineOptions({
  name: 'GemsAlert',
})

withDefaults(defineProps<AlertProps>(), {
  isIcon: true,
  type: 'info',
  effect: 'light',
  closable: true,
})

const emits = defineEmits<AlertEmits>()


const visible = ref<boolean>(true)

const hideAlert = () => {
  visible.value = false
  emits('close')
}

defineExpose({
  hide: () => {
    hideAlert()
  }
})

</script>